<template>
	<view class="app-container">
		
		<!-- <navigator url="/pages/order/order-preview?sn=995c1dd37ae757a538e287c0865731cc">详情页</navigator> -->
		<view v-if="progress > 0" @click="progress = progress -1">
			<image src="@/static/icon/right_arrow.png" mode="widthFix" style="width: 30rpx;transform: rotate(180deg);margin-bottom: 20rpx;"></image>
		</view>
		
		<view v-if="progress == 0">
			<view class="flex title-box">
				<view class="flex1 title" :class="{active: company == 1}" @click="company = 1">海马体</view>
				<view class="flex1 title" :class="{active: company == 2}" @click="company = 2">天真蓝</view>
			</view>
			<view class="">
				<view v-for="(item, index) of goods" :key="index" class="goods" @click="selectGoods(index)">
					<image :src="item.detail_img" mode="widthFix"></image>
					<view class="mg-10">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<view v-if="progress == 1">
			<view class="">
				<view v-for="(item, index) of cities" :key="index" class="city flex" @click="selectCity(index)">
					<view class="pd-30 flex1">{{item.city_name}}</view>
					<image src="@/static/icon/right_arrow.png" style="width: 20rpx;" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		<view v-if="progress == 2" class="form">
			<view>产品：{{goods[goodsIndex].name}}</view>
			<view>城市：{{cities[cityIndex].city_name}}</view>
			<view class="flex">电话：<input v-model="mobile" type="tel" placeholder="请输入"></view>
			<view class="flex">姓名：<input v-model="name" placeholder="请输入" /></view>
			<view><button class="mg-top-50" @click="save">提交订单</button></view>
		</view>
		
		<view v-if="progress == 3">
			
			<textarea v-model="link"></textarea>
			<button @click="copy">复制</button>
		</view>
	</view>
</template>

<script>
	import order from '@/api/order'
	export default {
		data() {
			return {
				progress: 0,
				goods: [],
				goodsIndex: -1,
				company: 1,
				type: 'A',
				cities: [],
				cityIndex: -1,
				mobile: '',
				name: '',
				link: '',
				userId: 0
			}
		},
		created() {
			
			var ua = window.navigator.userAgent.toLowerCase();
			if(ua.match(/MicroMessenger/i) == 'micromessenger'){
				if (!(/openid/.test(location.href))) {
					
					let url = "http://daxue.laohoulundao.com/weixin/weixinService/link_with_openid?url=" + encodeURI(location.href);
					location.replace(url);
				} else {
					this.userId = this.getQueryVariable('openid');
					
				}
			}
			
			
			this.getGoods()
		},
		watch:{
			company() {
				this.getGoods()
			},
			goodsIndex() {
				this.getCities()
			}
		},
		methods: {
			getQueryVariable(variable)
			{
			       var query = window.location.search.substring(1);
			       var vars = query.split("&");
			       for (var i=0;i<vars.length;i++) {
			               var pair = vars[i].split("=");
			               if(pair[0] == variable){return pair[1];}
			       }
			       return(false);
			},
			getGoods() {
				order.getGoods(this.company).then(res => {
					this.goods = res.data
				})
			},
			getCities() {
				order.cities(this.company, this.type).then(res => {
					this.cities = res.data
				})
			},
			selectGoods(index) {
				this.goodsIndex = index;
				this.progress = 1;
			},
			selectCity(index) {
				this.cityIndex = index
				this.progress = 2;
			},
			save() {
				const data = {
					userId: this.userId ? this.userId : parseInt(this.mobile.substr(0, 5)),
					productNo: this.goods[this.goodsIndex].sn,
					sipOrderNo: (new Date()).getTime(),
					mobileNo: this.mobile,
					cityId: this.cities[this.cityIndex].city_id,
					userName: this.name,
					company: this.company,
				}
				order.createOrder(data).then(res => {
					if (res.resCode == 0) {
						this.progress = 3;
						this.link = res.userLink;
					}
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.link,
					success() {
						uni.showToast({
							icon:'none',
							title:'已复制'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.title-box{
		margin-bottom: 20rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
		padding: 10rpx 0;
	}
	.title{
		text-align: center;
		font-weight: bold;
	}
	.active{
		color: green;
	}
	
	.goods{
		width: 48%;
		margin:20px 1%;
		box-shadow: 0 0 5px 5px #ccc;
		float: left;
		image{
			display: block;
			width: 100%;
		}
	}
	
	.city{
		border-bottom: 1px solid #ccc;
	}
	
	.form{
		> view {
			padding: 10rpx 0;
		}
		input{
			border: 1px solid #ccc;
			padding: 10rpx;
		}
	}
</style>
